<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../css/service.css" rel="stylesheet">
</head>
<body style="overflow:scroll;overflow-x:hidden;overflow-y:hidden" >
<div class="website-handle">
    <div class="websiteForm">
        <div class="txt-box">
            <input type="text" class="website-txt" id="site" placeholder="请选择省市区(必选)" name="site">
            <i></i>
        </div>
        <div class="txt-box">
            <input type="text" class="website-txt" id="keyword" placeholder="请输入详情地址" >
            <i></i>
        </div>
        <div class="txt-box">
            <input type="button" class="website-btn" value="查询">
        </div>
    </div>
</div>
<div class="website-result">
    <div class="website-map">
        <div class="map" id="map"></div>

    </div>

    <span class="back_btn">返回</span>
</div>
<script>
    $(function(){
        creatChinaMap('map');
        $('.back_btn').click(function(){
            creatChinaMap('map');
        })
        function creatChinaMap(id){
            var myChart = echarts.init(document.getElementById(id));
            $('.back_btn').hide();
            myChart.setOption({
                title: {
                    left: 'center',
                    textStyle: {
                        color: '#666'
                    }
                    ,top:0
                },
                tooltip: {
                    trigger: ''
                },
                series: [
                    {
                        name: '产品分布',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:[
                            {"name": "北京","value":2656 },
                            {"name": "天津","value":2342 },
                            {"name": "上海","value":3523 },
                            {"name": "重庆","value":423 },
                            {"name": "河北","value":2 },
                            {"name": "河南","value":323 },
                            {"name": "云南","value":54 },
                            {"name": "辽宁","value":42 },
                            {"name": "黑龙江","value":6464 },
                            {"name": "湖南","value":4242 },
                            {"name": "安徽","value":42 },
                            {"name": "山东","value":532 },
                            {"name": "新疆","value":455 },
                            {"name": "江苏","value":4635 },
                            {"name": "浙江","value":7534 },
                            {"name": "江西","value":243 },
                            {"name": "湖北","value":6345 },
                            {"name": "广西","value":432 },
                            {"name": "甘肃","value":45234 },
                            {"name": "山西","value":4234 },
                            {"name": "内蒙古","value":42 },
                            {"name": "陕西","value":4324 },
                            {"name": "吉林","value":432 },
                            {"name": "福建","value":4324 },
                            {"name": "贵州","value": 43},
                            {"name": "广东","value":4324 },
                            {"name": "青海","value":434 },
                            {"name": "西藏","value":7567 },
                            {"name": "四川","value":7657 },
                            {"name": "宁夏","value":75 },
                            {"name": "海南","value":3213 },
                            {"name": "台湾","value":5634 },
                            {"name": "香港","value":342 },
                            {"name": "澳门","value":97 }
                        ],
                        itemStyle: {
                            normal: {
                                borderColor: '#ccc',
                                areaColor: '#ffffff'
                            },
                            emphasis: {
                                areaColor: '#ccc',
                                color:'#fff',
                                borderWidth: 0,
                                show:false,
                            }
                        },
                    }
                ]
            });
            myChart.on('click',function(parm){
                console.log(parm)
                console.info(parm.name+'---'+parm.value)
                $('.box').find('h3').html(parm.name);
                $('.box').find('p').html(parm.name+'你大爷的');
                $('.box').find('span').html(parm.value);
                creatProvince(parm.name,id)
            })
        }

        function creatProvince(name,id){
            var pro = pyChinese(name);
            if(pro==''){
                return false;
            }
            $('.back_btn').show();
            var childChart = echarts.init(document.getElementById(id));
            var seriesdata = [{
                type: 'map',
                mapType: pro,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[],
                itemStyle: {
                    normal: {
                        borderColor: '#ccc',
                        areaColor: '#ffffff'
                    },
                    emphasis: {
                        areaColor: '#ccc',
                        color:'#fff',
                        borderWidth: 0,
                        show:false,
                    }
                },
                animation: false
            }];
            var option = {
                title: {
                    text: name,
                    left: 'center',
                    textStyle: {
                        color: '#000'
                    }
                    ,top:0
                },
                series: seriesdata
            };
            $.get('json/'+pro+'.json', function(gdMap) {
                echarts.registerMap(pro, gdMap);
                childChart.setOption(option, true);

            });
        }
    })
</script>
</body>
</html>